<template>
    <div class="Hydropower-Top">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            水电用量
        </p>
    </div>
    <div class="DuTon">
        <div class="degrees">
            <div class="degrees_icon">
                <img src="../../assets/iconDu.png" alt="">
            </div>
            <div class="degrees_number">
                <p style="font-size: 16px; font-weight: 400;">
                    72670
                </p>
                <p style="font-size: 9px; color: rgba(194, 214, 255, 1);">
                    总用电量 (度)
                </p>
            </div>
        </div>
        <div class="ton">
            <div class="ton_icon">
                <img src="../../assets/iconDun.png" alt="">
            </div>
            <div class="ton_number">
                <p style="font-size: 16px; font-weight: 400;">
                    6809
                </p>
                <p style="font-size: 9px; color: rgba(194, 214, 255, 1);">
                    总用水量 (吨)
                </p>
            </div>
        </div>
    </div>
    <div ref="chart" class="Hydropower-Bottom">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { getwater } from '../../api/intelligentDetection';

const chart = ref(null);
let myChart = null;
const Hydropower = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    
    // 配置柱状图的选项
    const option = {
        title: {
            textStyle: { color: '#ffffff' }, // 设置标题颜色为白色
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['安防设备用电', '教学用水', '生态用水', '生活用水'],
            textStyle: { color: '#ffffff' }, // 图例文字颜色改成白色
            icon: 'circle', // 将图例的图标设置为圆形
            textStyle: {
                color: '#fff', // 图例文字颜色为深色
                fontSize: 10
            },
            right: 10, // 将图例靠右对齐
            top: 15,
            itemWidth: 10, // 设置圆点的宽度（大小）
            itemHeight: 10, // 设置圆点的高度（大小）
        },
        grid: {
            left: '20%', // 设置图表网格左边距为 20%，将图表向右移动
            bottom: '10%', // 设置图表网格顶部边距
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'], // 横向显示月份
            axisLine: {
                lineStyle: { color: '#2B3E7B' }, // X轴颜色改成白色
            },
            axisLabel: {
                color: '#ffffff', // X轴标签颜色改成白色
            },
            axisTick: {
                show: false, // 隐藏X轴刻度线
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100000,
            interval: 25000,
            axisLine: {
                lineStyle: { color: '#587396' }, // Y轴颜色改成白色
            },
            axisLabel: {
                color: '#587396', // Y轴标签颜色改成白色
            },
            splitLine: {
                show: true, // Y轴网格线显示
                lineStyle: {
                    color: '#2B3E7B', // 网格线颜色
                    width: 1, // 网格线宽度
                    type: 'solid', // 网格线类型，'solid'为实线
                }
            }
        },
        series: [
            {
                name: '安防设备用电',
                type: 'bar',
                data: [40000, 45000, 30000, 50000, 60000, 70000],
                itemStyle: {
                    color: 'red',
                    borderRadius: [5, 5, 0, 0] // 设置柱状图的圆角，左上、右上、右下、左下
                }, // 柱状图的颜色设置为红色
            },
            {
                name: '教学用水',
                type: 'bar',
                data: [30000, 35000, 40000, 45000, 50000, 55000],
                itemStyle: { color: 'blue', borderRadius: [5, 5, 0, 0] }, // 柱状图的颜色设置为蓝色
            },
            {
                name: '生态用水',
                type: 'bar',
                data: [20000, 25000, 30000, 35000, 40000, 45000],
                itemStyle: { color: 'green', borderRadius: [5, 5, 0, 0] }, // 柱状图的颜色设置为绿色
            },
            {
                name: '生活用水',
                type: 'bar',
                data: [10000, 15000, 20000, 25000, 30000, 35000],
                itemStyle: { color: 'purple', borderRadius: [5, 5, 0, 0] }, // 柱状图的颜色设置为紫色
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
}

onMounted(() => {
    Hydropower()
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});

</script>

<style scoped>
.Hydropower-Top {
    position: fixed;
    right: 100px;
    top: 59px;
    width: 330px;
    height: 30px;
    background-image: url('../../assets/CombinedShape.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.DuTon {
    width: 330px;
    height: 80px;
    position: fixed;
    right: 100px;
    top: 105px;
    /* background: rgba(12, 29, 95, 1); */
    display: flex;

    .degrees {
        width: 155px;
        height: 80px;
        background: rgba(12, 29, 95, 1);
        background: url("../../assets/PhotoDu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        display: flex;


        .degrees_icon {
            position: absolute;
            top: 25px;
            left: 15px;
        }

        .degrees_number {
            position: absolute;
            top: 20px;
            left: 85px;
        }
    }

    .ton {
        width: 155px;
        height: 80px;
        background: rgba(12, 29, 95, 1);
        position: absolute;
        top: 0%;
        right: 0%;
        background: url("../../assets/PhotoDu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .ton_icon {
            position: absolute;
            top: 25px;
            left: 15px;
        }

        .ton_number {
            position: absolute;
            top: 20px;
            left: 85px;
        }
    }
}

.Hydropower-Bottom {
    width: 330px;
    height: 180px;
    background: rgba(12, 29, 95, 1);
    position: relative;
    right: -54px;
    top: 205px;
}
</style>
